<%--
  Created by IntelliJ IDEA.
  User: 天天好心情
  Date: 2024/11/1
  Time: 8:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--引入vue--%>
    <script src="../js/vue.js"></script>
    <%--引入axios--%>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <%--引入echarts--%>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        #main01 {
            float: left;
        }

        #main02 {
            float: left;
        }

        #main03 {
            float: left;
        }
    </style>
</head>
<body>
<div id="app">
    <%--折叠面板--%>
    <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item name="1">
            <template slot="title">
                <p style="font-size: 18px;">欢迎</p>
            </template>
            <div style="margin-left: 240px">
                <el-form :inline="true" :model="from" class="demo-form-inline">
                <span>日期范围:</span>
                <el-date-picker
                        v-model="from.times"
                        type="daterange"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
                <el-button type="success" icon="el-icon-search" @click="byTime">立即查询</el-button>
                <el-button type="info" icon="el-icon-refresh-left" @click="reset">重置</el-button>
                </el-form>
            </div>
        </el-collapse-item>
        <el-collapse-item name="2">
            <template slot="title">
                <p style="font-size: 18px;">营销额预览排行</p>
            </template>
            <%--本店营销额和成本饼状图--%>
            <div id="main01" style="width: 600px;height: 400px"></div>
            <%--各分店营销额统计--%>
            <div id="main02" style="width: 600px;height: 400px"></div>
        </el-collapse-item>
        <el-collapse-item name="3">
            <template slot="title">
                <p style="font-size: 18px;">商品销量预览排行</p>
            </template>
            <%--各商品销量统计--%>
            <div id="main03" style="width:800px;height: 400px"></div>
        </el-collapse-item>
    </el-collapse>
</div>
</body>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            activeNames: ['1'],//默认打开第一个面板
            result01: undefined,//本店营销额和成本
            from: {},//时间段
            branchName: '',//分店名称
        },
        created() {
            this.loadtu01();
            this.loadtu02();
            this.loadtu03();
            this.loadBranchName();
        },
        methods: {
            loadBranchName() {
                axios.get('/statistics/loadBranchName').then(res => {
                    this.branchname = res.data.data
                })
            },
            loadtu01() {
                axios.post('/statistics/loadtu01',this.from).then(res => {
                    // this.result01 = res.data.data
                    var myChart = echarts.init(document.getElementById('main01'));
                    myChart.setOption(option = {
                        color: ['blue', 'yellow', 'green', 'red'],
                        title: {
                            text: '本店进销统计',
                            subtext: '实时更新',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                mark: {show: true},
                                dataView: {show: true, readOnly: false},
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },
                        series: [
                            {
                                name: 'money',
                                type: 'pie',
                                radius: '50%',
                                data: [
                                    {value: res.data.data[0], name: '营销额'},
                                    {value: res.data.data[1], name: '成本额'},
                                    {value: res.data.data[2], name: '盈利'},
                                    {value: res.data.data[3], name: '亏损'}
                                ],
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    });
                })
            },
            loadtu02() {
                axios.post('/statistics/loadtu02',this.from).then(res => {
                    var myChart = echarts.init(document.getElementById('main02'));
                    myChart.setOption(option = {
                        title: {
                            text: '各分店营销额统计',
                            subtext: '实时更新',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                mark: {show: true},
                                dataView: {show: true, readOnly: false},
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },
                        series: [
                            {
                                name: 'money',
                                type: 'pie',
                                radius: '50%',
                                data: res.data.data,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    });
                })
            },
            loadtu03() {
                axios.post('/statistics/loadtu03',this.from).then(res => {
                    var myChart = echarts.init(document.getElementById('main03'));
                    myChart.setOption(option = {
                        title: {
                            text: "各商品销量统计",
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'axis',
                            borderWidth: "1",//边框宽度

                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        barWidth: '60%',//柱状图宽度
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: res.data.data.name,
                                axisTick: {
                                    alignWithLabel: true
                                },
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        toolbox: {
                            show: true,
                            feature: {
                                mark: {show: true},
                                dataView: {show: true, readOnly: false},
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },
                        series: [
                            {
                                name: "销量",
                                type: 'bar',
                                barWidth: '60%',
                                data: res.data.data.value,
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: true,//显示值
                                            position: "top",//显示位置
                                            textStyle: {
                                                color: "black",
                                                fontSize: 16
                                            }
                                        }
                                    },
                                },
                            }
                        ]
                    });
                })
            },
            handleChange(val) {
                console.log(val);
            },// 选择器选择事件
            byTime() {
                this.loadtu01();
                this.loadtu02();
                this.loadtu03();
            },// 时间选择器选择事件
            //点击重置
            reset() {
                this.from={};
            }
        }
    })
</script>
</html>
